<template>
  <div class="loginbody">
    <div class="logindata">
      <div class="logintext">
        <h2>教务管理系统</h2>
      </div>
      <div class="login-page">
        <div class="formdata">
          <el-form ref="form" :model="form" :rules="rules">
            <el-form-item prop="username">
              <el-input
                v-model="form.username"
                clearable
                placeholder="请输入账号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="form.password"
                clearable
                placeholder="请输入密码"
                show-password
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="tool">
          <div>
            <el-checkbox v-model="checked" @change="remenber"
              >记住密码</el-checkbox
            >
          </div>
        </div>
        <div class="butt">
          <el-button type="primary" @click.native.prevent="login('form')"
            >登录</el-button
          >
          <!-- <el-button class="shou" @click="register">注册</el-button> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiLogin } from "@/api/login";
// import { setToken } from "@/request/auth";
import { ShowError, ShowSuccess } from "@/utils/prompt";

export default {
  name: "login",
  data() {
    return {
      activeName: "1",
      form: {
        password: "",
        username: "",
      },
      checked: false,
      checkedManage: false,
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "change" },
          { max: 10, message: "不能大于10个字符", trigger: "change" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
          { max: 10, message: "不能大于10个字符", trigger: "change" },
        ],
      },
      rulesRegister: {
        usernameReg: [
          { required: true, message: "请输入用户名", trigger: "change" },
          { max: 10, message: "不能大于10个字符", trigger: "change" },
        ],
        passwordReg: [
          { required: true, message: "请输入密码", trigger: "change" },
          { max: 10, message: "不能大于10个字符", trigger: "change" },
        ],
        phone: [{ required: true, message: "请输入手机号", trigger: "change" }],
        address: [{ required: true, message: "请输入地址", trigger: "change" }],
      },
    };
  },
  mounted() {
    if (localStorage.getItem("User_info")) {
      this.form = JSON.parse(localStorage.getItem("User_info"));
      this.checked = true;
    }
  },
  methods: {
    //用户登录
    login(form) {
      console.log(this.form);
      this.$refs[form].validate((valid) => {
        if (valid) {
          apiLogin(this.form).then((res) => {
            if (res.data.code == 200) {
              ShowSuccess("登录成功");
              localStorage.setItem("is_admin", res.data.data.is_admin);
              localStorage.setItem("Token", res.data.data.token);
              localStorage.setItem("User_Id", res.data.data.id);
              this.$router.push({ path: "/main/home" });
              this.remenber(true);
            } else {
              ShowError(res.msg);
              this.remenber(false);
            }
          });
        }
      });
    },
    //用户记住密码
    remenber(data) {
      this.checked = data;
      if (this.checked) {
        localStorage.setItem("User_info", JSON.stringify(this.form));
      } else {
        localStorage.removeItem("User_info");
      }
    },
  },
};
</script>

<style scoped>
.loginbody {
  width: 100%;
  height: 100%;
  min-width: 1000px;
  background-image: url("../../assets/images/login-1.jpg");
  background-size: 100% 100%;
  background-position: center center;
  overflow: auto;
  background-repeat: no-repeat;
  position: fixed;
  line-height: 100%;
  padding-top: 150px;
}

.logintext {
  margin-bottom: 20px;
  line-height: 50px;
  text-align: center;
  font-size: 30px;
  font-weight: bolder;
  color: white;
}

.logindata {
  width: 400px;
  height: 300px;
  transform: translate(-50%);
  margin-left: 50%;
  margin-top: 100px;
}

.tool {
  display: flex;
  justify-content: space-between;
  color: #606266;
}

.butt {
  margin-top: 10px;
  text-align: center;
}

.shou {
  cursor: pointer;
  color: #606266;
}
</style>
